<template>
  <view>
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="退款"></van-nav-bar>
    <!-- #endif -->
    <scroll-view
      class="drawback-wrap"
      scroll-y="true"
      :style="styleHeight"
      refresher-enabled="true"
      :refresher-triggered="trigger"
      @refresherrefresh="refresherrefresh"
      show-scrollbar="false">
      <!-- <view class="content-wrap">
      <view class="flex-column content content1">
        <view class="iconfont icon-enterprise"></view>
        <view class="textt">企业钱包</view>
        <view class="textb">
          {{ data.items.unitBalance ? `￥${data.items.unitBalance}` : '--' }}
        </view>
      </view>
      <view class="line"></view>
      <view class="flex-column content content2">
        <view class="iconfont icon-personal"></view>
        <view class="textt">个人钱包</view>
        <view class="textb">
          {{ data.items.personalBalance ? `￥${data.items.personalBalance}` : '--' }}
        </view>
      </view>
    </view> -->
      <view class="top-content">
        <view class="text">
          <view class="textt">
            {{ data.items.personalBalance ? `${data.items.personalBalance}` : '--' }}
          </view>
          <view class="textb">个人钱包余额(元)</view>
        </view>
      </view>
      <view class="coupon-content">
        <text class="title text-bold">账号：{{ data.accountNo }}</text>
        <view class="line"></view>
        <text class="title text-bold">退款详情</text>
        <view class="info1">
          <text class="unit">￥</text>
          <input
            class="content-input"
            type="digit"
            maxlength="8"
            v-model="data.refundFee"
            placeholder="请输入退款金额" />
        </view>
        <view class="info">
          <view class="left flex-column">
            <text class="test">可退款金额</text>
            <!-- <text class="test">申请退款金额</text> -->
            <text class="test">退款中金额</text>
          </view>
          <view class="right flex-column">
            <text class="test">
              {{ data.availableAmount ? `￥${data.availableAmount}` : '--' }}
            </text>
            <!-- <view class="test">
            <input
              class="content-input"
              type="digit"
              maxlength="8"
              v-model="data.refundFee"
              placeholder="请输入退款金额" />
          </view> -->
            <text class="test text-red">
              {{ data.processingAmount ? `￥${data.processingAmount}` : '--' }}
            </text>
            <view class="test text-bule" @click="linkToRefund">退款申请记录</view>
          </view>
        </view>
        <view class="line"></view>
        <text class="title text-bold">退款说明</text>
        <view class="info">
          <view>
            <view class="test1">
              1、退款按照充值记录进行逐笔退款，退款金额按原路返回。一次申请可能产生多笔退款到账记录，到账时间由各充值渠道（微信/支付宝）决定，请耐心等待。
            </view>
            <view class="test1">2、存在待支付订单时无法进行退款操作。</view>
            <view class="test1">3、根据支付渠道规则，仅支持退3个月内的充值金额。</view>
            <view class="test1">4、参与充值活动的充值金额不支持退款。</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="bottom-wrap" :style="styleBntH">
      <button class="bnt-wrap bnt" @tap="applyDrawback">申请退款</button>
    </view>
  </view>

  <!-- </view> -->
</template>

<script lang="ts" setup>
import { getSystemInfo, getUserId, getOpenId, systemInfo, setToastInstance } from '@mixins/info';
import { getAccount, getAvailableRefund, refundOrder } from '@/service/apis/mine';
import { mathMultiplys } from '@/utils/maths';
import { noMultipleClicks, getItem } from '@/utils/util';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const $toast: any = inject('$Toast');
const styleBntH = `height: calc(124rpx + ${getSystemInfo().safeBottom}px)`;
let styleHeight = ref(`height: calc(100vh - (124rpx + ${getSystemInfo().safeBottom}px))`);
// #ifdef H5
styleHeight.value = `height: calc(100vh - (124rpx + ${getSystemInfo().safeBottom}px) - ${
  getSystemInfo().navHeight
}px)`;
// #endif

const data = reactive({
  items: {} as any,
  accountNo: '',
  availableAmount: '',
  processingAmount: '',
  refundFee: '',
});

onLoad((option: any) => {
  console.log('option=====', option);
  // data.accountNo = option.accountNumber;
  data.accountNo = getItem('accountNumber');
  getAccountData();
  applyDrawback = noMultipleClicks(applyDrawback);
});

const getAccountData = (noLoading: boolean = false) => {
  getAccount(
    { originalAccountId: getUserId(), accountType: 0 },
    { account: { accountId: getUserId() } },
    noLoading
  )
    .then((res: any) => {
      console.log(res);
      if (res) {
        data.items = res;
        getRefund(data.items.id);
      }
    })
    .catch(() => {});
};

const getRefund = (id: any) => {
  getAvailableRefund(id)
    .then((res: any) => {
      console.log(res);
      if (res) {
        data.availableAmount = res.availableAmount;
        data.processingAmount = res.processingAmount;
      }
    })
    .catch(() => {});
};

let applyDrawback = () => {
  if (!new RegExp(/^\d+(\.\d{1,2})?$/).test(data.refundFee)) {
    $toast('请输入正确的金额');
    return;
  }
  if (Number(data.refundFee) <= 0) {
    $toast('退款金额要大于0');
    return;
  }
  if (Number(data.refundFee) > Number(data.availableAmount)) {
    $toast('退款金额不能大于可退款金额');
    return;
  }
  const money = mathMultiplys(Number(data.refundFee), 100);
  const obj = {
    totalMoney: money,
    source: 0,
    openId: getOpenId(),
  };
  refundOrder(obj).then((res: any) => {
    $toast('退款操作成功');
    data.refundFee = '';
    const timer = setTimeout(() => {
      getAccountData(true);
      clearTimeout(timer);
    }, 1000);
  });
};

/**自定义下拉刷新 */
const trigger = ref(false);
/**下拉刷新 */
const refresherrefresh = () => {
  trigger.value = true;
  setTimeout(() => {
    trigger.value = false;
    getRefund(data.items.id);
  }, 1000);
};

const linkToRefund = () => {
  uni.navigateTo({
    url: `/pagesMyCenter/drawback/refundRecord`,
  });
};

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss" scoped>
.drawback-wrap {
  position: relative;
  height: calc(100vh - 12px);
  padding-top: 12px;
  background-color: #f6f8ff;
  overflow: hidden;

  .top-content {
    width: 351px;
    height: 98px;
    background-image: url($url + 'mine/refund-bg.png');
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 16px 12px 16px;
    display: flex;
    align-items: center;

    .textt {
      font-size: 28px;
      font-weight: 600;
      line-height: 22px;
      color: #ffffff;
      margin-left: 33px;
    }

    .textb {
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0.12px;
      color: #ffffff;
      margin-left: 33px;
      margin-top: 10px;
    }
  }

  .coupon-content {
    margin: 0 16px 12px 16px;
    padding: 16px;
    background-color: #fff;
    font-size: 14px;
    color: #545454;
    border-radius: 8px;

    .title {
      line-height: 24px;
      color: #000;
    }

    .info1 {
      display: flex;
      justify-content: space-between;
      line-height: 36px;
      margin-top: 6px;

      .unit {
        font-size: 18px;
      }

      .content-input {
        padding: 4px;
        border: 1px solid #d5d5d5;
        border-radius: 4px;
        width: 100%;
        margin-left: 4px;
      }
    }

    .info {
      display: flex;
      font-size: 14px;
      justify-content: space-between;

      .left {
        width: 30%;
        color: #858585;
      }

      .right {
        width: 70%;
        text-align: right;
        color: #242424;
      }

      .test {
        line-height: 22px;
        margin-top: 8px;
      }

      .test1 {
        line-height: 22px;
        margin-top: 8px;
        color: #545454;
      }

      .text-red {
        color: #fa3939;
      }

      .text-bule {
        color: $uni-color-primary;
      }
    }

    .line {
      margin: 12px 0;
      height: 1px;
      background-color: #f2f2f2;
      // border-bottom: 1px solid #f2f2f2;
    }
  }
}

.bottom-wrap {
  display: flex;
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e6e6e6;
  box-sizing: border-box;

  .bnt {
    height: 44px;
    width: 343px;
    margin-top: 9px;
    border-radius: 50px;
  }
}
</style>